<template>
<!--    <el-dialog :title="$i18n.t('GENERATE_REPAYMENT_CODE')" :visible.sync="visible" width="500px" :before-close="onClose">-->
    <Modal
        v-model="visible"
        :title="$i18n.t('GENERATE_REPAYMENT_CODE')"
        :closable="false"
    >
        <el-form label-width="120px" style="padding-right: 50px">
            <el-form-item :label="$i18n.t('REPAYMENT_TYPE')" required :error="errors.type">
                <el-select v-model="mdl.type" style="width: 100%">
                    <el-option v-for="(item, index) in repayConfig.type" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="mdl.type === 2" :label="$i18n.t('PARTIAL_REPAYMENT_AMOUNT')" required :error="errors.amount">
                <el-input-number v-model="mdl.amount" :min="100000"></el-input-number>
            </el-form-item>
            <el-form-item :label="$i18n.t('REPAYMENT_CHANNEL')" required :error="errors.repay_type">
                <el-select v-model="mdl.repay_type" @change="mdl.repay_channel = null" style="width: 100%">
                    <el-option v-for="(item, index) in repayConfig.channel" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$i18n.t('REPAYMENT_BANK')" required :error="errors.repay_channel">
                <el-select v-model="mdl.repay_channel" style="width: 100%">
                    <el-option v-for="(item, index) in bank" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="messageContent !== ''" :label="$i18n.t('SMS_CONTENT')">
                <el-input type="textarea" :rows="5" :value="messageContent" disabled></el-input>
            </el-form-item>
            <el-form-item v-if="errorMessage !== ''">
                <Alert type="error" show-icon>{{ errorMessage }}</Alert>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onClose">{{ $i18n.t('CANCEL') }}</el-button>
            <el-button type="primary" @click="onLocalSubmit" :loading="loading">{{ $i18n.t('CONFIRM_AND_SEND') }}</el-button>
        </div>
    </Modal>
<!--    </el-dialog>-->
</template>

<script>
    export default {
        name: 'GenerateRepaymentCodeForm',
        props: ['visible', 'model', 'repayConfig', 'onSubmit', 'messageContent', 'errors', 'errorMessage', 'loading'],
        data () {
            return {
                mdl: {
                    type: null,
                    repay_type: null,
                    repay_channel: null,
                    amount: null
                }
            }
        },
        watch: {
            mdl: {
                handler (newVal) {
                    this.$emit('update:model', newVal)
                },
                deep: true
            }
        },
        computed: {
            bank () {
                // eslint-disable-next-line no-prototype-builtins
                if (this.repayConfig.channel_list && this.repayConfig.channel_list.hasOwnProperty(this.mdl.repay_type)) {
                    return this.repayConfig.channel_list[this.mdl.repay_type]
                } else {
                    return []
                }
            }
        },
        methods: {
            onClose () {
                this.$emit('update:visible', false)
            },
            onLocalSubmit () {
                this.$emit('on-submit')
            }
        }
    }
</script>

<style scoped>

</style>
